<template>
    <div class="resetPassword">
        <header class="resetH p-all">
          <a class="iconfont icon-fangxiang1" @click="back"></a><h1>重置密码</h1>
        </header>
         <div class="steps">
            <el-steps :active="active" finish-status="success" space='30'>
            <el-step title="验证账号"></el-step>
            <el-step title="设置新密码"></el-step>
            </el-steps>
         </div>
         <div class="inputTel">
         <i class="iconfont icon-yonghu"></i> <input type="text" placeholder="请输入手机号" v-model="tel">
         </div>
         <div class="nextStep">
             <slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            :slider-text="text"
            ></slide-verify>
            <div>{{msg}}</div>
         </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { findTel } from '@/utils/api.js'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  data () {
    return {
      active: 1,
      msg: '',
      text: '请向右滑动开始验证',
      tel: ''
    }
  },
  methods: {
    onSuccess () {
      let obj = { tel: this.tel }
      findTel(obj).then(res => {
        window.console.log(res)
        if (res.code === '1111') {
          this.$router.push({ path: '/resetPasswordTo', query: { tel: obj.tel } })
        } else {
          Toast.fail('不存在该用户')
        }
      })
    },
    onFail () {
      this.msg = ''
    },
    onRefresh () {
      this.msg = ''
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" >
.resetPassword{
    width: 100%;
    height: 100%;
   background: rgba(207, 202, 202, 0.2);
 .resetH{
     background: #fff;
     height:0.44rem;
     display: flex;
     align-items: center;
     border-bottom: 0.01rem solid #f2f2f2;
     h1{
         font-size:0.18rem;
         display: inline-block;
         width: 100%;
         text-align: center;
         font-family: 'Microsoft Yahei';
         color:#030303;
         font-weight: 400;
         padding-right:0.6rem;
     }
     a{
         display: inline-block;
         font-size:0.18rem;
         width:0.4rem;
         height:0.44rem;
         margin-right: .2rem;
         color: #817f7f;
         display:flex;
         align-items: center;
         justify-content: center;
         font-weight: 500;
     }
 }
.steps{
    padding: 0.05rem 0.1rem;
    margin: 0.1rem auto;
    .el-step ,.is-horizontal{
    flex-basis:100% !important;
    margin-right: -2rem !important;
    }
    .el-step__icon.is-text{
        left: 0.8rem;
    }
    .el-step__title.is-success{
        margin-left: 0.56rem;
    }
    .el-step__title.is-process{
        margin-left: 0.56rem;
    }
}
.inputTel{
    height: 0.45rem;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0 0.1rem;
   input{
        width: 3.17rem;
        border: 0;
        text-indent: 0.2rem;
 }
}
.nextStep{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top:0.3rem;
.slide-verify-slider-text{
    width: 2.5rem;
    display: inline-block;
     background: -webkit-gradient(linear,left top,right top,color-stop(0,#444),color-stop(.4,#444),color-stop(.5,#fff),color-stop(.6,#444),color-stop(1,#444));
     -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: slide 3s infinite;
    -webkit-text-size-adjust: none;
  }
  @keyframes slide{
      0% {
    background-position: -1rem 0;
  }
  100% {
    background-position: 1rem 0;
}
  }
  .slide-verify-slider-mask-item{
      background:-webkit-radial-gradient(50% 0,circle,#f1f1f0,#717271);
   .container-active .slide-verify-slider-mask-item[data-v-6dd9a078]{
       border:0 !important;
       top:0 !important;
       height: 0.4rem;
   }
  }
  .slide-verify-slider-mask{
      border:0;
      background: -webkit-radial-gradient(50% 0,circle,#5edcad,#30b775);
  }
}
}
</style>
